<template>
  <gui-page class="gui-bg-white" :custom-header="true">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">搜索</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gFixedTop>
      <view class="gui-dark-bg-level-1 gui-flex gui-row gui-bg-gray" style="padding: 15rpx 10rpx">
        <gui-search
          class="gui-flex1"
          clear-btn
          :custom-class="['gui-bg-white', 'gui-margin-x']"
          :kwd="kwd"
          placeholder="请输入关键词"
          @confirm="submit"
          @inputting="inputting"
        />
        <view class="gui-padding-small gui-color-gray" style="margin-right: 15rpx">
          <button class="gui-button-mini gui-primary-border-color gui-border-radius-full" :plain="true" type="default" @tap.stop="submit">
            <text class="gui-icons gui-primary-color gui-button-text-mini">&#xe604; 搜索</text>
          </button>
        </view>
      </view>
    </template>
    <template #gBody>
      <view class="gui-bg-white gui-padding" style="margin-top: 110rpx">
        <text class="gui-color-gray">热门搜索</text>
        <view class="gui-flex gui-row gui-wrap gui-margin-top">
          <gui-tags
            v-for="(item, index) in tags"
            :key="index"
            :custom-class="['gui-bg-gray', 'gui-color-back']"
            :line-height="2.2"
            :size="28"
            :text="item.text"
            @tapme="kwd = item.text"
          />
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'

// 搜索
const kwd = ref<string>('')
const tags = ref<Array<any>>([
  { id: 1, text: '文科', checked: false },
  { id: 2, text: '理科', checked: false },
  { id: 11, text: '化学', checked: false },
  { id: 12, text: '生物', checked: false },
  { id: 13, text: '物理', checked: false },
  { id: 14, text: '历史', checked: false },
])
// 监听输入
const inputting = (e: any) => {
  kwd.value = e
}
// 提交
const submit = () => {
  uni.$emit('search', kwd.value)
  uni.navigateBack({ delta: 1 })
}
</script>
<style scoped></style>
